<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>美多商城-绑定用户</title>
    <link rel="stylesheet" type="text/css" href="{{ static('css/reset.css')}}">
    <link rel="stylesheet" type="text/css" href="{{ static('css/main.css')}}">
    <script type="text/javascript" src="{{ static('js/host.js')}}"></script>
    <script type="text/javascript" src="{{ static('js/vue-2.5.16.js')}}"></script>
    <script type="text/javascript" src="{{ static('js/axios-0.18.0.min.js')}}"></script>
    <script type="text/javascript" src="{{ static('js/common.js') }}"></script>
    <script>
        window.onload = function (){
            let vm = new Vue({
                el:'#Superstart',
                data:{
                    host: host,
                    is_show_waiting: false,
                    error_password: false,
                    error_phone: false,
                    error_image_code: false,
                    error_sms_code: false,
                    error_image_code_message: '',
                    error_phone_message: '',
                    error_sms_code_message: '',

                    image_code_id: '', // 图片验证码id
                    image_code_url: '',

                    sms_code_tip: '获取短信验证码',
                    sending_flag: false, // 正在发送短信标志

                    password: '',
                    mobile: '',
                    image_code: '',
                    sms_code: '',
                    access_token: '',
                    uid:uid,
                },
                mounted(){
                    this.generate_image_code()

                },
                methods:{
                    check_phone(){
                        let de =/^1[3-9]\d{9}$/;
                        if (de.test(this.mobile)){
                            //如果书写正确，再判断是否重复
                            let url = '/mobiles/' + this.mobile +'/count/';
                            axios.get(url,{responseType:'json'}).then(response=>{
                                if(response.data.count >= 1) {
                                    this.error_phone_message ='手机号已注册！';
                                    this.error_phone = true;

                                }else{
                                    this.error_phone = false;
                                }
                            }).catch(error=>{
                                console.error(error.response);
                            });

            {#                this.error_mobile = false;#}
                        }else {
                            this.error_phone_message = '您输入的手机号格式不对';
                            this.error_phone = true;
                        }
                    },
                    check_pwd(){
            let de = /^[a-zA-Z0-9_-]{8,20}$/;
            if (de.test(this.password)){
{#                匹配上不显示#}
                this.error_password = false;
            }else{
                this.error_password = true;
            }
        },
                    check_sms_code(){
            if (this.sms_code.length != 4){
                this.error_sms_code_message = '请填写四位数短信验证码';
                this.error_sms_code = true
            }else {
                //如果确实填写了规范的短信验证码
                //判断是否正确 axios
                let check_sms_url = '/check_sms_code/' +this.mobile +'/'+ this.sms_code + '/';
                axios.get(check_sms_url,{responseType:"json"}).then(response=>{
                    if (response.data.ret == 0){
                        //验证成功
                        this.error_sms_code = false;
                    }else {
                        this.error_sms_code_message = '短信验证码输入错误';
                        this.error_sms_code = true;
                    }
                }).catch();


            }
        },
                    check_code(){
                        //非真即假
                        if (!this.image_code){
                            this.error_image_code_message = '请输入图片验证码';
                            this.error_image_code = true;
                        }else{
                            //如果有数据则执行：
            {#                this.error_code = false;#}
                            //发起axios到后台redis数据库检测是否存在
                            //1拼接url
                            let code_url = '/testcode/' + this.uuid + '/';
                            //2.axions

                            axios.get(code_url,{responseType:"json"}).then(response=>{
                                if (response.data.text == this.image_code.toLocaleLowerCase()){
                                    this.error_image_code = false;

                                }else{
                                    this.error_image_code_message = '图片验证码输入错误,请您重新输入';
                                    this.error_image_code = true;
                                }
                            }).catch();
                        }
                    },
                    send_sms_code(){
                        //点击按钮就检查这两项， 手机号和验证码是否正确，如果不正确则返回
                        this.check_phone();
                        this.check_code();
                        if (this.error_phone == true || this.error_image_code==true){
                            alert('请填写正确信息');
                            return;
                        }
                        if (this.sending_flag == true){
                            return
                        }
                        //运行一次变为真,下次则不能再发起请求了，避免重复发送
                        this.sending_flag = true;
                        //验证通过就发送短信验证码，通过axios
                        //拼接url   通过查询传参数 手机号 图片验证码 uuid
                        let sms_url = '/sms_codes/' + this.mobile +'/?code=' + this.image_code +'&uuid='+ this.uuid;
                        axios.get(sms_url,{responseType:'json'}).then(response=>{
                            if (response.data.code1 == '0'){
                                //发送成功 ,开始倒计时5分钟
                                let num = 300;
                                let t = setInterval(()=>{
                                    if (num == 1){
                                        clearInterval(t);
                                        this.sms_code_tip = '获取短信验证码';
                                        //表示可以再次发送
                                        this.sending_flag = false;
                                }else {
                                        num = num-1;
                                        this.sms_code_tip = '请在'+ num + '秒内输入';

                                    }
                                },1000);

                            }
                            else if (response.data.code1 == '4004'){
                                    //表示验证码失效了
                                    this.error_code_message = response.data.errmsg;
                                    this.error_code = true
                                }
                            else if (response.data.code1 == '4001'){
                                    this.error_code_message = response.data.errmsg;
                                    this.error_sms_code = true;
                                }
                            else if (response.data.code1 == '2'){
                                this.error_sms_code_message = response.data.errmsg;
                                this.error_sms_code = true;
                            }
                        }).catch()
                    },
                    generate_image_code(){
                        //生成uuid
                        this.uuid = generateUUID();
                        this.image_code_url = '/image_codes/' + this.uuid + '/'

        },
                    on_submit() {
                        this.check_pwd();
                        this.check_phone();
                        this.check_sms_code();
                        this.check_code();

                        if (this.error_password == false && this.error_phone == false && this.error_sms_code == false) {
                            axios.post('/sina_callback/', {
                                password: this.password,
                                mobile: this.mobile,
                                uid: this.uid,
                            }, {
                                responseType: 'json',
                            })
                                .then(response => {
                                    // 记录用户登录状态
                                    location.href = '/';
                                })
            }
        }

                }
            })

        }
    </script>
</head>
<body>
    <div id="Superstart">
        <div v-if="is_show_waiting" class="pass_change_finish">等一下会死吗...</div>
        <div v-else>
            <div class="register_con">
                <div class="l_con fl">
                    <a class="reg_logo"><img src="{{ static('images/logo.png')}}"></a>
                    <div class="reg_slogan">商品美 · 种类多 · 欢迎光临</div>
                    <div class="reg_banner"></div>
                </div>

                <div class="r_con fr">
                    <div class="reg_title clearfix">
                        <h1>绑定究极VIP至尊用户</h1>
                    </div>
                    <div class="reg_form clearfix" v-cloak>
                        <form id="reg_form" v-on:submit.prevent="on_submit">
                        <ul>
                            <li>
                                <label>手机号:</label>
                                <input type="text" v-model="mobile" v-on:blur="check_phone" name="phone" id="phone">
                                <span v-show="error_phone" class="error_tip">{{ error_phone_message }}</span>
                            </li>
                            <li>
                                <label>密码:</label>
                                <input type="password" v-model="password" v-on:blur="check_pwd" name="pwd" id="pwd">
                                <span v-show="error_password" class="error_tip">密码最少8位，最长20位</span>
                            </li>
                            <li>
                                <label>图形验证码:</label>
                                <input type="text" v-model="image_code" v-on:blur="check_code" name="pic_code" id="pic_code" class="msg_input">
                                <img v-bind:src="image_code_url" v-on:click="generate_image_code" alt="图形验证码" class="pic_code">
                                <span v-show="error_image_code" class="error_tip">{{ error_image_code_message }}</span>
                            </li>
                            <li>
                                <label>短信验证码:</label>
                                <input type="text" v-model="sms_code" v-on:blur="check_sms_code" name="msg_code" id="msg_code" class="msg_input">
                                <a v-on:click="send_sms_code" class="get_msg_code">{{ sms_code_tip }}</a>
                                <span v-show="error_sms_code" class="error_tip">{{ error_sms_code_message }}</span>
                            </li>
                            <li class="reg_sub">
                                <input type="submit" value="保 存" name="">
                            </li>
                        </ul>
                        </form>
                    </div>
                </div>
            </div>

            <div class="footer no-mp">
                <div class="foot_link">
                    <a href="#">关于我们</a>
                    <span>|</span>
                    <a href="#">联系我们</a>
                    <span>|</span>
                    <a href="#">招聘人才</a>
                    <span>|</span>
                    <a href="#">友情链接</a>
                </div>
                <p>CopyRight © 2016 北京美多商业股份有限公司 All Rights Reserved</p>
                <p>电话：010-****888    京ICP备*******8号</p>
            </div>
        </div>
    </div>
    <script>
        var uid = {{ uid }};
    </script>
{#    <script type="text/javascript" src="js/sina_callback.js"></script>#}
</body>
</html>